<template>
<!-- 只能有一个大的div 根模板只能用一个元素 -->
  <div id="app">
  <p @click="handleClick">{{msg}}</p>

  <p v-if="isShow">{{msg}}</p>
  <p v-else>其他</p>


  <div>
    <input type="number" v-model.number="num1">+
    <input type="number" v-model.number="num2">={{sum}}
  </div>

  <div>
    <p>{{ms | handleMsg}}</p>
  </div>

    <img :src="isShow?url:''" alt="">

    <input type="text" v-model="msg">

  <div v-for="item of arr" :key="item.id">
    {{item.name}}
  </div>
  <div v-for="item of movies" :key="item.id">
    <img :src="item.pic" alt="">
  </div>
  
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      msg:"hello",
      url : "https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg",
      arr:[
        {name:"张三",id:1001},
        {name:"李四",id:1002},
        {name:"王五",id:1003}
      ],
      isShow:true,
      num1:1,
      num2:2,
      ms:"你会觉得时间DVD v和是故意",
      movies:[]
    }
  },
  filters:{
    handleMsg(val){
      console.log(val)
      return val.slice(0,3)+"XXX"
    }
  },
  computed:{
    sum(){
      return this.num1+this.num2
    },
  },
  watch:{
    num1(){
      console.log("watch")
    }
  },
  beforeCreate(){
    console.log(1)
  },
  created(){
    console.log(2)
  },
  beforemount(){
    console.log(3)
  },


  beforeUpdate(){
    console.log(5)
  },
  updated(){
    console.log(6)
  },
  mounted(){
    console.log(4)
    this.$http.get("movie/top250").then(res=>{
      
      console.log(res.data.res)
      this.movies = res.data.res
    })
  },
  methods:{
    handleClick(){
      this.msg="change"
    }
  }
}
</script>

<style>

</style>
